<template>
  <div>
    <div class="addkeyword">
      <div>添加禁用词</div>
      <div class="addTag">
        <el-tag :key="tag" v-for="tag in addWordTags" closable :disable-transitions="false" @close="handleClose(tag)">
          {{tag}}
        </el-tag>
        <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput">添加</el-button>
        <el-button type="primary" size="small" @click="handleSubmitAdd">确认提交关键词</el-button>
      </div>
    </div>
    <div class="keyword">
      <span>会被屏蔽的词：</span>
      <div>
        <el-tag :key="tag" v-for="tag in allWords" closable :disable-transitions="false" @close="handleClose2(tag)">
          {{tag}}
        </el-tag>
      </div>

    </div>
    <el-table :data="commentTable" border style="width: 100%">
      <el-table-column prop="username" label="用户名" width="180">
      </el-table-column>
      <el-table-column prop="realContent" label="评论内容">
      </el-table-column>
      <el-table-column prop="productId" label="产品id">
      </el-table-column>
      <el-table-column prop="content" label="屏蔽后内容">
      </el-table-column>
    </el-table>
    <div class="pagination-wrapper">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pData.currentPage" :page-sizes="pData.pageSizes" :page-size="pData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pData.total" background>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { pagination } from "@/mixins/pagination";
import { getCommentList, getAllwords, addWord, removeWord } from "@/api";



export default {
  mixins: [pagination],
  mixins: [pagination],
  data() {
    return {
      // 商品分类表格数据
      commentTable: [],
      commentTable: [],
      temParams: null,
      loading: false,
      addWordTags: [],
      temParams: null,
      inputVisible: false,
      inputValue: "",
      allWords: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取评论列表
    // 获取评论列表
    getData(filter) {
      filter = filter || this.temParams;
      let params = {
        current: this.pData.currentPage,
        size: this.pData.pageSize,
      };
      if (filter && Object.key(filter).length) {
        Object.assign(params, filter);
        this.temParams = filter;
      } if (this.temParams) {
        Object.assign(params, this.temParams);
      } // 获取评论列表
      getCommentList(params).then((res) => {
        let result = res.data.data;
        this.pData.total = res.data.data.total;
        this.commentTable = result.list.map((item) => {
          for (const key in item.comment) {
            item[key] = item.comment[key];
          }
          return item;
        });
      });
      getAllwords().then((res) => {
        this.allWords = res.data.data;
      });
    },
    handleClose(tag) {
      this.addWordTags.splice(this.addWordTags.indexOf(tag), 1);
    },
    handleClose2(tag) {
      removeWord(tag).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功"
          })
          this.allWords.splice(this.allWords.indexOf(tag), 1);
        }
      });
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        let isInclude = this.addWordTags.includes(inputValue);
        if (!isInclude) {
          this.addWordTags.push(inputValue);
        }
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    // 添加关键词
    handleSubmitAdd() {
      console.log(this.addWordTags);
      let WordString = this.addWordTags.join();
      addWord(WordString).then((res) => {
        this.$message({
          type: "success",
          message: "添加成功",
        });
        this.getData();
      });
    },

  }

}
</script>
<style lang="scss" scoped>
.pagination-wrapper {
  margin-top: 24px;
  text-align: right;
}
.addTag {
  margin-top: 24px;
  .el-button {
    margin-left: 12px;
  }
}
.keyword {
  margin-top: 24px;
}
.el-table {
  margin-top: 24px;
}
.el-tag {
  margin-top: 12px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
